<template>
	<view class="u-swipe-action-item" ref="u-swipe-action-item">
		<view class="u-swipe-action-item__right">
			<slot name="button">
				<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
					:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
					}]" @tap="buttonClickHandler(item, index)">
					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
						}, item.style]">
						<u-icon v-if="item.icon" :name="item.icon"
							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
							:size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
							:customStyle="{
								marginRight: item.text ? '2px' : 0
							}"></u-icon>
						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
							:style="[{
								color: item.style && item.style.color ? item.style.color : '#ffffff',
								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
							}]">{{ item.text }}</text>
					</view>
				</view>
			</slot>
		</view>
		<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
		<view class="u-swipe-action-item__content bg-con" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
			:change:size="wxs.sizeChange">
			<!-- #endif -->
			<!-- #ifdef APP-NVUE -->
			<view class="u-swipe-action-item__content" ref="u-swipe-action-item__content" @panstart="onTouchstart"
				@tap="clickHandler">
				<!-- #endif -->
				<slot />
			</view>
		</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
import touch from "../../libs/mixin/touch.js";
import props from "./props.js";
// #ifdef APP-NVUE
import nvue from "./nvue.js";
// #endif
// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
import wxs from "./wxs.js";
// #endif
/**
 * SwipeActionItem 滑动单元格子组件
 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
 * @tutorial https://www.uviewui.com/components/swipeAction.html
 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
 * @property {Boolean}			disabled		是否禁用（默认 false ）
 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
 * @property {Array}			options			右侧按钮内容
 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
 * @event {Function(index)}	open	组件打开时触发
 * @event {Function(index)}	close	组件关闭时触发
 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
 */
export default {
  name: "u-swipe-action-item",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch],
  // #ifdef APP-NVUE
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props, nvue, touch],
  // #endif
  // #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props, touch, wxs],
  // #endif
  data() {
    return {
      // 按钮的尺寸信息
      size: {},
      // 父组件u-swipe-action的参数
      parentData: {
        autoClose: true,
      },
      // 当前状态，open-打开，close-关闭
      status: "close",
    };
  },
  watch: {
    // 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
    wxsInit(newValue, oldValue) {
      this.queryRect();
    },
  },
  computed: {
    wxsInit() {
      return [
        this.disabled,
        this.autoClose,
        this.threshold,
        this.options,
        this.duration,
      ];
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 初始化父组件数据
      this.updateParentData();
      // #ifndef APP-NVUE
      uni.$u.sleep().then(() => {
        this.queryRect();
      });
      // #endif
    },
    updateParentData() {
      // 此方法在mixin中
      this.getParentData("u-swipe-action");
    },
    // #ifndef APP-NVUE
    // 查询节点
    queryRect() {
      this.$uGetRect(".u-swipe-action-item__right__button", true).then(
        (buttons) => {
          this.size = {
            buttons,
            show: this.show,
            disabled: this.disabled,
            threshold: this.threshold,
            duration: this.duration,
          };
        }
      );
    },
    // #endif
    // 按钮被点击
    buttonClickHandler(item, index) {
      if (item.autoClose) {
        this.status = "close";
      }
      this.$emit("click", {
        index,
        name: this.name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-swipe-action-item {
  position: relative;
  overflow: hidden;
  /* #ifndef APP-NVUE || MP-WEIXIN */
  touch-action: pan-y;
  /* #endif */

  &__content {
    // background-color: #FFFFFF;
    z-index: 10;
  }

  &__right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    @include flex;

    &__button {
      @include flex;
      justify-content: center;
      overflow: hidden;
      align-items: center;

      &__wrapper {
        @include flex;
        align-items: center;
        justify-content: center;
        padding: 0 15px;

        &__text {
          @include flex;
          align-items: center;
          color: #ffffff;
          font-size: 15px;
          text-align: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
